<template>
  <div class="cate-container mt45 mb60">
    <van-nav-bar
      fixed
      left-arrow
      @click-left="$router.go(-1)"
      title="商品分类"
    ></van-nav-bar>
    <van-grid :gutter="6" square :column-num="3">
      <van-grid-item
        @click="$router.push({ name: 'goodsList', query: { cateid: item.id } })"
        v-for="item in cateList"
        :key="item.id"
        icon="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg"
        :text="item.catename"
      >
        <img style="width:50%" src="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg" alt="">
        <p>{{item.catename}}</p>
      </van-grid-item>
    </van-grid>
  </div>
</template>
  
  <script setup>
import { ref, onMounted, inject } from "vue";
// 商品分类列表
const axios = inject("axios");
const cateList = ref([]);
// 请求商品分类列表
const getCateList = () => {
  axios.get("/getcate").then((res) => {
    if (res.code === 200) {
      cateList.value = res.list;
    }
  });
};
onMounted(() => {
  getCateList();
});
</script>
  
  <style scoped lang="scss">
.cate-container {
  background-color: #f1f1f1;
  min-height: 100vh;
}
</style>